<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<div id="app">
		<h1 v-if="status==1">显示</h1>		
		<h2 v-show="isShow">不显示</h2>
		
		<img width="200" v-bind:src="src">
		
		<div v-bind:class="clas?'aa':'bb'"></div>	
				
		<button @click="changeAA">修改aa</button>
		<button @click="changeBB">修改bb</button>
		
		
		<div v-bind:class="clas?'aa':'bb'"></div>	
		
		<p>{{name}}</p>
		<input type="text" v-model="name" @change="change"/>
		
	</div>
</body>
</html>

<style>
	.aa{
		width:100px;
		height:100px;
		background-color: blue;
	}
	
	.bb{
		width:100px;
		height:100px;
		background-color: yellow;
	}
	
	
</style>


<script src="../js/v2.6.10/vue.js"></script>	
<script>
	new Vue({
		el:"#app",
		data:{
			name:'hhl',
			status:1,
			isShow: false,
			isActive: true,
			src:"https://i03piccdn.sogoucdn.com/57dc1cb5d29ec94f",//https://i01piccdn.sogoucdn.com/bad582d3596cbfd5
			clas: true
		},
		methods:{
			changeAA(){
				this.clas=true
			},
			changeBB(){
				this.clas=false
			},
			change(){
				alert(this.name)
			}
			
		},
		computed:{
			
		}
	})
</script>